<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">


    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!-- 富文本编辑器 -->
    <link rel="stylesheet" href="/plugins/kindeditor/themes/default/default.css"/>
    <script charset="utf-8" src="/plugins/kindeditor/kindeditor-min.js"></script>
    <script charset="utf-8" src="/plugins/kindeditor/lang/zh_CN.js"></script>
    <script src="/plugins/angularjs/angular.min.js"></script>

    <script>
        var app = angular.module("goodspinyougou", []);
        app.service("typeTemplateService",function($http) {

            //根据ID查询
            this.getOptionById=function(id){
                return $http.get("/typeTemplate/option/"+id);
            }

            //根据ID查询
            this.findOne=function(id){
                return $http.get("/typeTemplate/"+id);
            }
        });
            app.controller("goodscontroller", function ($scope, $http,typeTemplateService) {
            $scope.entity = {goodsDesc:{specificationItems:[]}};

            //查询第tpyeId
            $scope.findOneId = function (id) {
                //发送Http请求，执行增加
                $http.get("/itemcat/" + id).success(function (response) {
                    $scope.entity.typeTemplateId = response.typeId;

                });
            }

            //获取文本编辑器内容，将内容储存到数据库
            // $scope.entity.goodsDesc.introduction=editor.html();
            //查询第一集分类
            $scope.findItemList = function (id) {
                //发送Http请求，执行增加
                $http.get("/itemcat/parent/" + id).success(function (response) {
                    $scope.list = response;
                });

                $scope.list2=null;
				$scope.list3=null;
				//清空模板Id
                $scope.entity.typeTemplateId=null;
            }

            //查询第2集分类
            $scope.findItem2List = function (id) {
                //发送Http请求，执行增加
                $http.get("/itemcat/parent/" + id).success(function (response) {
                    $scope.list2 = response;
                });
				$scope.list3=null;
                $scope.entity.typeTemplateId=null;
            }

			//查询第2集分类
            $scope.findItem3List = function (id) {
                //发送Http请求，执行增加
                $http.get("/itemcat/parent/" + id).success(function (response) {
                    $scope.list3 = response;
                });
            }


            $scope.$watch('entity.typeTemplateId',function (newValue,oldValue) {

                if (!isNaN(newValue)){
                        //发送Http请求，执行增加
                    typeTemplateService.findOne(newValue).success(function (response) {
                            $scope.brandList=angular.fromJson(response.brandIds);
                            $scope.entity.goodsDesc.customAttributeItems =angular.fromJson(response.customAttributeItems);
                        });
                    typeTemplateService.getOptionById($scope.entity.typeTemplateId).success(function (response) {

                        $scope.specList=response;
                    });

                }

            });
                addCloum=function(itemList,attributeValue,attributeName){
                    var items=[];
                    for (var i = 0;i<itemList.length;i++){
                        for (var j = 0;j<attributeValue.length;j++){
                            var newItem = angular.copy(itemList[i]);
                            newItem.spec[attributeName]=attributeValue[j];
                            items.push(newItem);
                        }
                    }
                    return items;
                }


                //SKU重组
                $scope.createItemsbak=function () {
                    //没有选中任何规格的时候，有一个默认商品
                    var item={"price":0,"num":0,"status":1,"isDefault":"0",spec:{}};
                    $scope.entity.items=[item];

                    for (var i = 0;i<$scope.entity.goodsDesc.specificationItems.length;i++){
                        var attributeName =$scope.entity.goodsDesc.specificationItems[i].attributeName;
                        var attributeValue=$scope.entity.goodsDesc.specificationItems[i].attributeValue;

                        $scope.entity.items=addCloum($scope.entity.items,attributeValue,attributeName);
                    }
                }



                //存储选中的规格数据
                $scope.updateSpecAttribute=function ($event,atrributeName,attributeValue) {
                    //判断当前规格名字，在集合中是否存在  比如说传入参数(atrributeName)为:屏幕尺寸
                    var result = searchObjectByKey($scope.entity.goodsDesc.specificationItems,atrributeName);

                    // 如果存在，则直接将该对象返回过来result
                    if(result!=null){
                        //如果是勾选事件
                        if($event.target.checked){
                            //将勾选中的规格选项(attributeValue:例如3G)加入到result的attributeValue属性中
                            result.attributeValue.push(attributeValue);
                        }else{
                            //将该规格选项从规格的attributeValue中移除
                            var valueIndex = result.attributeValue.indexOf(attributeValue);  //获取当前传入的规格选项下标
                            result.attributeValue.splice(valueIndex,1);

                            //如果移除后，规格选项的个数为0，则将该规格移除
                            if(result.attributeValue.length<=0){
                                //获取下标
                                var nameIndex = $scope.entity.goodsDesc.specificationItems.indexOf(result);
                                //移除
                                $scope.entity.goodsDesc.specificationItems.splice(nameIndex,1);
                            }
                        }
                    }else{
                        //如果不存在,构建一条数据加入集合
                        var newSpec = {"attributeName":atrributeName,"attributeValue":[attributeValue]};
                        $scope.entity.goodsDesc.specificationItems.push(newSpec);
                    }
                }

                /***
                 * @param list=specificationItems[];
                 * @param attributeName:网络
                 */
                searchObjectByKey=function (list,attributeName) {
                    for(var i=0;i<list.length;i++){
                        //如果第i个对象的attributeName=attributeName(传入的值),说明存储
                        if(list[i]['attributeName']==attributeName){
                            return list[i];
                        }
                    }
                }



            //添加品牌方法
            $scope.save = function () {
                //发送Http请求，执行增加
                $http.post("/goods/add", $scope.entity).success(function (response) {
                    //判断执行状态
                    if (response.success) {
                        //重新加载新的数据
                        alert(response.msg);
                    } else {
                        //打印错误消息
                        alert(response.msg);
                    }
                });
            }
        });
    </script>


</head>

<body class="hold-transition skin-red sidebar-mini" ng-init="findItemList(0)" ng-app="goodspinyougou"
      ng-controller="goodscontroller">

<!-- 正文区域 -->
<section class="content">

    <div class="box-body">

        <!--tab页-->
        <div class="nav-tabs-custom">

            <!--tab头-->
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#home" data-toggle="tab">商品基本信息</a>
                </li>
                <li>
                    <a href="#pic_upload" data-toggle="tab">商品图片</a>
                </li>
                <li>
                    <a href="#customAttribute" data-toggle="tab">扩展属性</a>
                </li>
                <li>
                    <a href="#spec" data-toggle="tab">规格</a>
                </li>
            </ul>
            <!--tab头/-->

            <!--tab内容-->
            <div class="tab-content">

                <!--表单内容-->
                <div class="tab-pane active" id="home">
                    <div class="row data-type">
                        <div class="col-md-2 title">商品分类</div>

                        <div class="col-md-10 data">
                            <table>
                                <tr>
                                    <td>
                                        <select class="form-control" ng-model="entity.category1Id" ng-change="findItem2List(entity.category1Id)">
                                            <option ng-repeat="item in list" value="{{item.id}}">{{item.name}}</option>
                                        </select>
                                    </td>
                                    <td>
										<select class="form-control" ng-model="entity.category2Id" ng-change="findItem3List(entity.category2Id)">
											<option ng-repeat="item in list2" value="{{item.id}}">{{item.name}}</option>
										</select>
                                    </td>
                                    <td>
										<select class="form-control" ng-model="entity.category3Id" ng-change="findOneId(entity.category3Id)">
											<option ng-repeat="item in list3" value="{{item.id}}">{{item.name}}</option>
										</select>
                                    </td>
                                    <td>
                                        模板ID:{{entity.typeTemplateId}}
                                    </td>
                                </tr>
                            </table>

                        </div>


                        <div class="col-md-2 title">商品名称</div>
                        <div class="col-md-10 data">
                            <input type="text" ng-model="entity.goodsName" class="form-control" placeholder="商品名称" value="">
                        </div>

                        <div class="col-md-2 title">品牌</div>
                        <div class="col-md-10 data" ng-model="entity.brandId">
                            <select class="form-control" ng-model="entity.brandId" ng-click="getOneId(35)">
                                <option ng-repeat="item in brandList" value="{{item.id}}">{{item.text}}</option>
                            </select>
                        </div>

                        <div class="col-md-2 title">副标题</div>
                        <div class="col-md-10 data">
                            <input type="text" ng-model="entity.caption" class="form-control" placeholder="副标题"
                                   value="">
                        </div>

                        <div class="col-md-2 title">价格</div>
                        <div class="col-md-10 data">
                            <div class="input-group">
                                <span class="input-group-addon">¥</span>
                                <input type="text" ng-model="entity.price" class="form-control" placeholder="价格"
                                       value="">
                            </div>
                        </div>

                        <div class="col-md-2 title editer">商品介绍</div>
                        <div class="col-md-10 data editer">
                            <textarea name="content" style="width:800px;height:400px;visibility:hidden;"></textarea>
                        </div>

                        <div class="col-md-2 title rowHeight2x">包装列表</div>
                        <div class="col-md-10 data rowHeight2x">

                            <textarea rows="4" ng-model="entity.goodsDesc.packageList" class="form-control"
                                      placeholder="包装列表"></textarea>
                        </div>

                        <div class="col-md-2 title rowHeight2x">售后服务</div>
                        <div class="col-md-10 data rowHeight2x">
                            <textarea rows="4" ng-model="entity.goodsDesc.saleService" class="form-control"
                                      placeholder="售后服务"></textarea>
                        </div>


                    </div>
                </div>

                <!--图片上传-->
                <div class="tab-pane" id="pic_upload">
                    <div class="row data-type">
                        <!-- 颜色图片 -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"
                                    data-toggle="modal"><i class="fa fa-file-o"></i> 新建
                            </button>
                            <button type="button" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除
                            </button>
                        </div>

                        <table class="table table-bordered table-striped table-hover dataTable">
                            <thead>
                            <tr>
                                <th class="" style="padding-right:0px">
                                    <input id="selall" type="checkbox" class="icheckbox_square-blue">
                                </th>
                                <th class="sorting">颜色</th>
                                <th class="sorting">图片</th>
                            </thead>
                            <tbody>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>

                                </td>
                                <td>
                                    <img alt="" src="" width="100px" height="100px">
                                </td>
                            </tr>
                            </tbody>
                        </table>

                    </div>
                </div>


                <!--扩展属性-->
                <div class="tab-pane" id="customAttribute">
                    <div class="row data-type">
                        <div ng-repeat="item in entity.goodsDesc.customAttributeItems">
                            <div class="col-md-2 title">{{item.text}}</div>
                            <div class="col-md-10 data" >
                                <input class="form-control" ng-model="item.value" placeholder="扩展属性1">
                            </div>
                        </div>
                    </div>
                </div>
                <div>
<!--                    选中的规格{{entity.goodsDesc.specificationItems}}-->
<!--                    <br><br><br>-->
<!--                    items1:{{entity.items}}<br>-->
                </div>
                <!--规格-->
                <div class="tab-pane" id="spec">
                    <div class="row data-type">
                        <div class="col-md-2 title">是否启用规格</div>
                        <div class="col-md-10 data">
                            <input type="checkbox">
                            <button type="button" class="btn btn-default" title="自定义规格" data-target="#mySpecModal"
                                    data-toggle="modal"><i class="fa fa-file-o"></i> 自定义规格
                            </button>
                        </div>
                    </div>
                    <p>

                    <div>

                        <div class="row data-type">

                            <div ng-repeat="item in specList">
                                <div class="col-md-2 title">{{item.text}}</div>
                                <div class="col-md-10 data">
					                            <span ng-repeat="option in item.options">
					                            	<input ng-click="updateSpecAttribute($event,item.text,option.optionName);createItemsbak();" type="checkbox">{{option.optionName}}
					                            </span>
                                </div>
                            </div>

                        </div>


                        <div class="row data-type">
                            <table class="table table-bordered table-striped table-hover dataTable">
                                <thead>
                                <tr>
                                    <th class="sorting" ng-repeat="spec in entity.goodsDesc.specificationItems">{{spec.attributeName}}</th>
                                    <th class="sorting">价格</th>
                                    <th class="sorting">库存</th>
                                    <th class="sorting">是否启用</th>
                                    <th class="sorting">是否默认</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr ng-repeat="item in entity.items">
                                    <td ng-repeat="spec in entity.goodsDesc.specificationItems">
                                       {{item.spec[spec.attributeName]}}
                                    </td>
                                    <td>
                                        <input class="form-control" ng-model="item.price" placeholder="价格">
                                    </td>
                                    <td>
                                        <input class="form-control" ng-model="item.num" placeholder="库存数量">
                                    </td>
                                    <td>
                                        <input ng-model="item.status" type="checkbox" ng-true-value="1" ng-false-value="1" >
                                    </td>
                                    <td>
                                        <input ng-model="item.isDefault" type="checkbox" ng-true-value="1" ng-false-value="1">
                                    </td>
                                </tr>

                                </tbody>
                            </table>

                        </div>

                    </div>
                </div>

            </div>
            <!--tab内容/-->
            <!--表单内容/-->

        </div>


    </div>
    <div class="btn-toolbar list-toolbar">
        <button ng-click="save()" class="btn btn-primary" ng-click="setEditorValue();save()"><i class="fa fa-save"></i>保存
        </button>
        <button class="btn btn-default" ng-click="goListPage()">返回列表</button>
    </div>

</section>


<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">上传商品图片</h3>
            </div>
            <div class="modal-body">

                <table class="table table-bordered table-striped">
                    <tr>
                        <td>颜色</td>
                        <td><input class="form-control" placeholder="颜色" ng-model="image_entity.color"></td>
                    </tr>
                    <tr>
                        <td>商品图片</td>
                        <td>
                            <table>
                                <tr>
                                    <td>
                                        <input type="file" id="file"/>
                                        <button class="btn btn-primary" type="button" ng-click="uploadFile()">
                                            上传
                                        </button>
                                    </td>
                                    <td>
                                        <!--									<img  src="{{image_entity.url}}" width="200px" height="200px">-->
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>

            </div>
            <div class="modal-footer">
                <button class="btn btn-success" ng-click="add_image_entity()" data-dismiss="modal" aria-hidden="true">
                    保存
                </button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>


<!-- 自定义规格窗口 -->
<div class="modal fade" id="mySpecModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">自定义规格</h3>
            </div>
            <div class="modal-body">

                <table class="table table-bordered table-striped">
                    <tr>
                        <td>规格名称</td>
                        <td><input class="form-control" placeholder="规格名称" ng-model="spec_entity.text"></td>
                    </tr>
                    <tr>
                        <td>规格选项(用逗号分隔)</td>
                        <td>
                            <input class="form-control" placeholder="规格选项" ng-model="spec_entity.values">
                        </td>
                    </tr>
                </table>

            </div>
            <div class="modal-footer">
                <button class="btn btn-success" ng-click="add_spec_entity()" data-dismiss="modal" aria-hidden="true">
                    保存
                </button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>


<!-- 正文区域 /-->
<script type="text/javascript">

    var editor;
    KindEditor.ready(function (K) {
        editor = K.create('textarea[name="content"]', {
            allowFileManager: true
        });
    });

</script>

</body>

</html>